<template>
	<view>
		<button v-show="isShow" class="login-btn" type="primary" @click="getUserInfo">
			微信用户一键登录
		</button>
		<view v-if="!isShow">
			<view class="padding" style="background-color: #f7a000;">
				<image :src="userInfo.avatarUrl" class="cu-avatar round" @click="toMyDetail(userInfo.openid)"></image>
				{{messageInfo.nickName}}

				<image src="../../static/images/erwei.png" class="cu-avatar radius" @tap="showModal" data-target="Modal"
					style="margin-left: 70%;"></image>
			</view>

			<!-- 推广二维码 -->
			<view class="cu-modal" :class="modalName=='Modal'?'show':''">
				<view class="cu-dialog">
					<view class="cu-bar bg-white justify-end">
						<view class="content">微信扫一扫邀请新用户</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-red"></text>
						</view>
					</view>
					<view class="padding-xl">
						<image src="../../static/images/yq.jpg" mode=""></image>
					</view>
				</view>
			</view>


			<view class="contentUser">
				<view class="padding-xl radius shadow shadow-lg bg-white margin-top"
					style="background-color: #D7C47C;margin: 0%;" @click="toRecharge(userInfo.openid)">
					<text class="fi1">余额￥:</text>
					<text class="fi1" style="color: #ff0000;font-size: 50rpx;">{{messageInfo.money}}</text>

				</view>
			</view>
		</view>

		<view class="hr"></view>
		<view class='item'>
			<view class="title" @click="toMyDetail(userInfo.openid)"><text class="cuIcon-title text-blue"></text>编辑资料
			</view>
			<view class="detail2">
				{{messageInfo.phone}}<text>></text>
			</view>
		</view>
		<view class="line"></view>
		<view class="item">
			<view class="title" @click="toMyOrder(messageInfo.id)"><text class="cuIcon-title text-blue"></text>我的订单
			</view>
			<view class="detail2">
				{{messageInfo.id}} <text> ></text>
			</view>
		</view>
		<view class="line"></view>
		<view class="item">
			<view class="title"><text class="cuIcon-title text-blue"></text>我的优惠券</view>
			<view class="detail2">
				<text> ></text>
			</view>
		</view>
		<view class="line"></view>
		<view class='item'>
			<view class="title"><text class="cuIcon-title text-blue"></text>客户电话</view>
			<view class="detail2">
				<text style="color:deepskyblue;"> 023-68238866</text>
			</view>
		</view>
		<view class="line"></view>
		<view class='item' @click="clear()">
			<view class="title"><text class="cuIcon-title text-blue"></text>退出登录</view>
			<view class="detail2">
				<text style="color:deepskyblue;"></text>
			</view>
		</view>
		<view class="line"></view>
<!-- <view>
   <button bindtap="clear">退出登录</button>
</view> -->
	</view>
	</view>



</template>

<script>
	export default {
		data() {
			return {
				isShow: true,
				userInfo: null,
				messageInfo: null,
				modalName: null,
				reload:''
			}
		},
		mounted() {
			let userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				if (new Date(userInfo.exp).getTime() < new Date().getTime()) {
					// 说明已经过期了
					uni.removeStorageSync('userInfo')
					this.isShow = true;
				} else {
					this.isShow = false;
					this.userInfo = userInfo;
				}
			}
			this.getMessageInfo()
		},
		
//下拉刷新
		    onPullDownRefresh() {
		      //重置一下数据
		      uni.reLaunch({
		      	url: './my'
		      });
		    },

		methods: {
			
			  //清除缓存
			  
			  clear(){
			     wx.clearStorageSync();//清除缓存
			     wx.showToast({
			        title: '退出登录成功',
			        icon: 'none',
			        duration: 1000,
			        success: function () {
			           setTimeout(function () {
			              //跳转到首页，强制重启
			              wx.reLaunch({
			                 url: '/pages/found/found',
			              })
			           }, 1000);
			        }
			     })
			 },

			refresh() {
			   uni.redirectTo({
			       url: './my'
			   });
			},
			// reload() {
			// 	var pages = getCurrentPages(); //获取所有页面的数组对象
			// 	var currPage = pages[pages.length - 1]; //当前页面
			// 	uni.reLaunch({
			// 					url: currPage.$page.fullPath
			// 				})
			// },
			/**
			 * @param {Object} 模拟框
			 */
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},

			toMyOrder(id) {
				console.log(id)
				uni.navigateTo({
					url: './myOrder?id=' + id
				});
			},


			toMyDetail(openid) {
				console.log(openid)
				uni.navigateTo({
					url: './myDetaile?openid=' + openid
				});
			},
			/**提现用户的余额
			 * @param {Object} openid
			 */
			toRecharge(openid) {
				console.log(openid)
				uni.navigateTo({
					url: './recharge?openid=' + openid
				});
			},
			getMessageInfo() {
				this.$axios({
					method: 'get',
					url: '/getUserMessageByOpenid',
					params: {
						openid: this.userInfo.openid
					}

				}).then(res => {
					this.messageInfo = res.data;

				}).catch(err => {
					console.log(err)
				})
			},
			getUserInfo() {
				// 展示加载框
				uni.showLoading({
					title: '加载中',
				});
				uni.getUserProfile({
					desc: '登录后可同步数据',
					success: async (obj) => {
						console.log('obj', obj);
						// 调用 action ，请求登录接口
						// await this.login(obj);
						uni.login({
							provider: 'weixin',
							success: (res) => {
								console.log('res-login', res);
								if (res.errMsg == 'login:ok') {
									this.$axios({
										method: 'post',
										url: '/wxLogin',
										data: {
											"avatarUrl": obj.userInfo.avatarUrl,
											"code": res.code,
											"gender": obj.userInfo.gender,
											"nickName": obj.userInfo.nickName,
										}
									}).then(res => {
										this.isShow = false;
										this.userInfo = res.data;
										//刷新
										// 设置过期时间
										let now = new Date();
										let ms = now.getTime();
										let exp = new Date(ms + 24 * 60 * 60 * 1000);
										this.userInfo.exp = exp;
										uni.setStorageSync("userInfo", res.data);
										uni.reLaunch({
											url: './my'
										});

									}).catch(err => {
										console.log(err)
									})
								}
							},
						});
					},
					fail: () => {
						uni.showToast({
							title: '授权已取消',
							icon: 'error',
							mask: true,
						});
					},
					complete: () => {
						// 隐藏loading
						uni.hideLoading();
					},
				});
			},
		}
	}
</script>

<style>
	Page {
		font-size: 14px;
		/* background-color: #ffaa00; */
	}

	.top {
		width: 100%;
		height: 180px;
		background: #61DDAA;
		padding-top: 15px;
		position: relative;
	}

	.center {
		width: 95%;
		height: 150px;
		background: white;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
		border-radius: 5px;
	}

	.contentUser {
		margin: 0;
		padding: 0;
	}

	.center_top {
		display: flex;
		flex-direction: row;
		width: 80%;
		height: 80px;
		margin: 0 auto;
		margin-top: 20rpx;
		border-bottom: 1px solid #EEEEEE;
	}

	.center_img {
		width: 66px;
		height: 66px;
		border-radius: 50%;
		overflow: hidden;
	}

	.center_img image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.center_img .user_head {
		width: 100%;
		height: 100%;
	}

	.center_info {
		display: flex;
		flex-direction: column;
		margin-top: 10rpx;
		margin-left: 30px;
	}

	.center_name {
		font-size: 20px;
	}

	.center_phone {
		color: #BEBEBE;
	}

	.center_down {
		display: flex;
		flex-direction: row;
		width: 80%;
		height: 35px;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.center_rank {
		width: 50%;
		height: 35px;
		display: flex;
		flex-direction: row;
	}

	.rank_text {
		height: 35px;
		line-height: 35px;
		margin-left: 10rpx;
		color: #AAAAAA;
	}

	.moneys {
		color: #ff0000;
	}

	.center_rank image {
		width: 35px;
		height: 35px;
	}

	.center_score {
		width: 50%;
		height: 35px;
		display: flex;
		flex-direction: row;
	}

	.center_score image {
		width: 35px;
		height: 35px;
	}

	.gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}

	/* 用户中心 */

	.hr {
		width: 100%;
		height: 15px;
		background-color: #f4f5f6;
	}

	.item {
		display: flex;
		flex-direction: row;
	}

	.title {
		padding-top: 15px;
		padding-bottom: 15px;
		padding-left: 15px;
		font-size: 15px;
	}

	.detail2 {
		font-size: 15px;
		position: absolute;
		right: 10px;
		height: 50px;
		line-height: 50px;
		color: #888;
	}

	.line {
		border: 1px solid #ccc;
		opacity: 0.2;
	}
</style>
